<template>
  <view class="index" :style="{overflow:'hidden', height: windowHeight}">
    <!-- 搜索 -->
		<Search @handleSearch="handleSearch" />

    <!-- 轮播图 -->
    <view class="slider">
      <swiper
        autoplay
        interval="2000"
        circular
        indicator-dots
        indicator-color="rgba(255,255,255,1)"
        indicator-active-color="rgba(255,255,255,.6)"
      >
        <swiper-item v-for="item in bannersDataList" :key="item.goods_id">
          <navigator :url="`/packone/goods/index?id=${item.goods_id}`">
            <image :src="item.image_src" />
          </navigator>
        </swiper-item>
      </swiper>
    </view>
    <!-- 功能导航 -->
    <view class="navs">
      <navigator
        v-for="(item, index) in navigationDataList"
        :key="index"
        :open-type="item.open_type ? item.open_type : 'navigate'"
        :url="item.open_type ? '/pages/category/index' : `/packone/list/index?query=${item.name}`"
      >
        <image :src="item.image_src" />
      </navigator>
    </view>
    <!-- 栏目楼层 -->
    <view class="floors" v-for="(item, index) in floorDataList" :key="index">
      <!-- 1 -->
      <view class="floor">
        <!-- title -->
        <view class="ftitle">
          <image :src="item.floor_title.image_src" />
        </view>
        <!-- pics -->
        <view class="fitem">
          <navigator v-for="prd in item.product_list" :key="prd.name" :url="`/packone/list/index?query=${prd.name}`">
            <image :src="prd.image_src" />
          </navigator>
        </view>
      </view>
    </view>
    <!-- 底部提示 -->
    <view class="end">
      <text>我是有底线的！</text>
    </view>
    <!-- 回到顶部 -->
    <view class="goTop icon-top" @click="goTop" v-if="isGoTop"></view>
  </view>
</template>

<script>
// 获取轮播图
import { getBannersRequest, getNavigationRequest, getFloorRequest } from '@/api/index.js'
export default {
  data () {
    return {
      // 屏幕高度
      windowHeight: '',
      // 请求的轮播图数据
      bannersDataList: [],
      // 导航菜单数据：
      navigationDataList: [],
      // 楼层数据
      floorDataList: [],
      // 是否显示回到顶部按钮
      isGoTop: false
    }
  },
  onLoad () {
    this.getbannersDataList()
    this.getNavigationDataList()
    this.getFloorDataList()
  },
  methods: {
    // 处理页面滚动
    handleSearch(pageHeight) {
      this.windowHeight = pageHeight
    },

    // 获取轮播图数据
    async getbannersDataList() {
      const {data} = await getBannersRequest()
      this.bannersDataList = data
    },

    // 获取导航菜单数据
    async getNavigationDataList() {
      const {data} = await getNavigationRequest()
      this.navigationDataList = data
    },

    // 获取楼层数据
    async getFloorDataList() {
      const { data } = await getFloorRequest()
      this.floorDataList = data
    },

    // 回到顶部
    goTop() {
      uni.pageScrollTo({
        scrollTop: 0
      })
    },

    // 获取页面滚动高度，显示回到顶部按钮
    onPageScroll(e) {
      // 获取滚动高度
      // console.log(e.scrollTop)
      // 获取半屏高度
      // console.log(uni.getSystemInfoSync().windowHeight / 2)
      // 如果滚动高度 >= 半屏高度，则显示按钮
      if(e.scrollTop >= uni.getSystemInfoSync().windowHeight / 2) {
        this.isGoTop = true
      } else{
        this.isGoTop = false
      }
    },

    // 监听下拉刷新事件
    onPullDownRefresh() {
      // 添加loading效果
      uni.showLoading({
        title: '数据加载中...',
        mask: true
      })
      // 开始刷新页面
      Promise.all([this.getbannersDataList(), this.getNavigationDataList(), this.getFloorDataList()]).then(() => {
        // 执行完停止loading
        uni.stopPullDownRefresh()
        // 关闭 loading
        uni.hideLoading()
      })
    }
  }
};
</script>

<style lang="scss">
// 首页
.index {
  // 轮播
  .slider {
    swiper,
    image {
      width: 750rpx;
      height: 340rpx;
    }
  }
  // 功能导航
  .navs {
    display: flex;
    padding: 30rpx;
    background: #fff;
    justify-content: space-between;
    navigator {
      width: 128rpx;
      height: 140rpx;
    }
  }

  // 栏目楼层
  .floor {
    .ftitle {
      padding-top: 30rpx;
      background: #f4f4f4;
      image {
        width: 750rpx;
        height: 60rpx;
      }
    }
    // pics
    .fitem {
      padding: 20rpx 16rpx 10rpx;
      overflow: hidden;
      navigator {
        float: left;
        width: 193rpx;
        height: 188rpx;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
      }
      navigator:nth-child(1) {
        width: 232rpx;
        height: 386rpx;
        margin-left: 0;
      }
      navigator:nth-child(2),
      navigator:nth-child(5) {
        width: 273rpx;
        height: 188rpx;
      }
    }
    &:first-child {
      .fitem {
        navigator {
          width: 233rpx;
        }
      }
    }
  }
  .end {
    text-align: center;
    font-size: 24rpx;
    color: #999;
  }
  .goTop {
    position: fixed;
    bottom: 30rpx;
    /* #ifdef H5 */
    bottom: 65px;
    /* #endif */
    right: 30rpx;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
    font-size: 48rpx;
    color: #666;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
  }
}
</style>
